import React, { useState, useEffect } from 'react';
import { FileExcelOutlined, SearchOutlined } from '@ant-design/icons';
import { Input, Button, Spin } from 'antd';
import { useHistory } from 'react-router-dom';
import { openNotification_util, fetchsync_util, useexcelauto, dealnullorundenfined, convertISODateTimeToYYYYMMDDHHMMSS, use_olreport_bybbbm } from '../util/util.js'
import Custom_table_hooks_config from '../newmes/custom_table_hooks_config.js'
var storage = window.localStorage;
import Sortable_new from '../newmes/sortable_new.js';
import { useLatest } from 'ahooks';
import logo from '../../../img/shipSRM/chlogo.png'
const Sfc = () => {
  const history = useHistory();
  const [sfclb, setCrkmxlb] = useState([])
  const [selectedRows, setselectedRows] = useState([])
  const [selectedRowKeys, setselectedRowKeys] = useState([])

  const [ysyj, setysyj] = useState('')
  const [bh, setbh] = useState('')
  const [isloading, setisloading] = useState(true)
  const [initSize, setinitSize] = useState() //table宽度大小

  const bhref = useLatest(bh)
  const ysyjref = useLatest(ysyj)

  const [columnarr, setcolumnarr] = useState([
    { show: true, title: "序号", key: "xuhao" },
    { show: true, title: "创建时间", key: "create_time" },
    { show: true, title: "物料名称", key: "wlmc" },
    { show: true, title: "物料编码", key: "wlbm" },
    { show: true, title: "规格型号", key: "ggxh" },
    { show: true, title: "仓库", key: "ck" },
    { show: true, title: "数量", key: "sl" },
    { show: true, title: "批号", key: "ph" },
    { show: true, title: "单位", key: "dw" },
    { show: true, title: "单据号", key: "djh" },
    { show: true, title: "单据类型", key: "ddlx" },
    { show: true, title: "出入库类型", key: "crklx" },
  ])

  const querylist = async () => {
    let rtdata = await use_olreport_bybbbm('v_shipSRM_sfc')
    console.log(rtdata, "111");
    rtdata.v_shipSRM_sfc.forEach(element => {
      element.create_time = element.create_time == null ? '' : convertISODateTimeToYYYYMMDDHHMMSS(element.create_time)
    });
    setCrkmxlb(dealnullorundenfined(rtdata.v_shipSRM_sfc))
    setselectedRowKeys([])
    setselectedRows([])
    setisloading(false)
  }

  const handleQuery = async () => {
    let rtdata = await fetchsync_util("/admin/qbrepote/queryCrkmxListAll", 'POST',
      { bh: bhref.current, ysyj: ysyjref.current }, "json")
    openNotification_util(rtdata.rtmessage)
    rtdata.resultdata.forEach(element => {
      element.czsj = element.czsj == null ? '' : convertISODateTimeToYYYYMMDDHHMMSS(element.czsj)
    });
    setCrkmxlb(dealnullorundenfined(rtdata.resultdata))
    setselectedRowKeys([])
    setselectedRows([])
    setisloading(false)

  }

  useEffect(() => {
    if (storage['Pc_sfc']) {
      var result = JSON.parse(storage['Pc_sfc'])
      setcolumnarr(result)
    } else {
      setcolumnarr(columnarr)
    }
    storage['Pc_sfc_initsize'] ? setinitSize(storage['Pc_sfc_initsize']) : setinitSize(1)
    document.addEventListener('keydown', handleKeyDown);
    querylist()
    return () => {
      document.removeEventListener('keydown', handleKeyDown);
    };

  }, [])

  const handleKeyDown = (e) => {
    if (e.keyCode === 13) {
      handleQuery()
    }
  }

  const handleExprot = async () => {
    let filtercol = JSON.parse(JSON.stringify(columnarr)).filter(item => item.show == true)
    useexcelauto(selectedRows, filtercol, '收发存列表')
  }

  //路由跳转
  const tonormal = (route) => {
    history.push({ pathname: route });
  }
  const handleselectfather = (selectedRows, selectedRowKeys) => {
    setselectedRows(selectedRows)
    setselectedRowKeys(selectedRowKeys)
  }

  return (
    <div style={styles.maincontainer}>
      <img src={logo} style={{ height: '5.5vh', width: "7%", position: 'absolute', left: '2%', top: '0.1vh', zIndex: "100" }} />
      <div style={styles.topcontainer} >
        <div style={{ width: "12%", height: "2vw", position:"absolute",left:"2%",
        backgroundColor:"#a91f24",color:"white",borderTopLeftRadius:"0.4rem",fontSize:"1vw",
        borderTopRightRadius:"0.4rem",textAlign:"center",textIndent:"0",
        fontWeight:"500",boxShadow:"0 0 10px #888888"}}>收发存列表
        </div>
        <Button type="primary" style={styles.butdcstyle}
          onClick={() => { tonormal('/') }}>
          登出</Button>
        <Button type="primary" style={styles.butmainstyle}
          onClick={() => { tonormal('/shipSRM/mainpage') }}>
          首页</Button>
      </div>
      <div style={styles.kshcontainer}>
        <div style={{
          width: "99vw", height: "", backgroundColor: "white", overflowX: "scroll", margin: "0.5vw",
          paddingLeft: "1vw"
        }}>
          <div style={styleobj.linestyleflex}>
            &nbsp;&nbsp;&nbsp;  <Button style={{ backgroundColor: "white", color: "#a91f24", fontWeight: "800" }}
              onClick={() => { isloading ? openNotification_util("请等待数据查询完成再操作！") : handleQuery() }}><ReloadOutlined />刷新</Button>
            &nbsp;&nbsp;&nbsp;  <Button style={{ backgroundColor: "white", color: "#a91f24", fontWeight: "800" }}
              onClick={handleExprot}><FileExcelOutlined />导 出</Button>
            <Sortable_new tableColnum={columnarr} handleTableColomn={(data) => { setcolumnarr(data); }}
              storageName="Pc_sfc" style={{ position: 'absolute', right: '2vw', top: '0.5rem', fontSize: "1.5rem" }}
              initSize={initSize} handleInitSize={(data) => { setinitSize(data); storage['Pc_sfc_initsize'] = data; }}
            />
          </div>
          {isloading ?
            (<div style={{ width: "10%", height: "10%", position: "absolute", left: "50%", top: "49%", color: "#14d9cc" }}><Spin /></div>)
            :
            <Custom_table_hooks_config tabledata={sfclb} tablecolnum={columnarr}
              sfdoubleclick="false" ifhiddencchangeselecttype="true"
              width={`${initSize * 100}vw`}
              selectedRows={selectedRows} selectedRowKeys={selectedRowKeys}
              handleselectson={(selectedRows, selectedRowKeys) => { handleselectfather(selectedRows, selectedRowKeys) }}
            />
          }
        </div>
      </div>
    </div>
  )
}

export default Sfc

var styles = {
  maincontainer: {
    height: "100vh", backgroundColor: `#F1F1F1`,
    backgroundSize: "100% 100%", width: "100%", position: "absolute", left: "0", color: "white", fontSize: "0.8rem"
  },
  topcontainer: {
    width: "100%", height: "10vw", backgroundImage: "linear-gradient(to bottom,#e4e5eb , white)", paddingTop: "3vw",
    position: "relative", fontSize: "0.89rem", textIndent: "2rem", fontWeight: "800", color: "#a91f24", borderRadius: "0 0 15px 15px"
  },
  butdcstyle: { paddingLeft:"1.5vw",paddingRight:"1.5vw", height: "2vw", position: "absolute", 
    right: "1%", top: "0%", backgroundColor: "#a91f24", fontSize: "0.8vw", borderRadius: "0 0 0.3vw 0.3vw" },
  butmainstyle: { paddingLeft:"1.5vw",paddingRight:"1.5vw", height: "2vw", 
    position: "absolute", right: "8%", top: "0%", backgroundColor: "#a91f24", fontSize: "0.8vw", borderRadius: "0 0 0.3vw 0.3vw" },
  kshcontainer: {
    width: "100vw", minHeight: "40vh", position: "absolute", top: "5vw", left: "0vw", backgroundColor: "#F1F1F1",
    color: "black"
  },
}

var styleobj = {
  linestyle: { height: "1.8rem", fontSize: "0.7rem", position: "relative", width: "100%", textIndent: "1rem" },
  linestylesmall: { height: "1.3rem", fontSize: "0.7rem", position: "relative", width: "100%", textIndent: "1rem" },
  linestyleflex: {
    height: "1.8rem", fontSize: "0.6rem", position: "relative", width: "96vw", marginLeft: "0.1%",
    display: "flex", justifyContent: "flex-start", alignItems: "center", marginBottom: "0.5rem",marginTop:"0.5rem"
  },
  linestyleflexitem: {
    height: "1.6rem", fontSize: "0.7rem", position: "relative", width: "23%", textIndent: "0.5rem",
    backgroundColor: "white", lineHeight: "1.6rem", fontSize: "0.75rem", fontWeight: "500", textAlign: "center"
  },
  linestyleflexitemleft: { backgroundColor: "#F0F0F0", position: "absolute", width: "35%", left: "0" },
  linestyleflexitemright: { backgroundColor: "white", position: "absolute", width: "64%", right: "0" },
  lineleft: { width: "100%", height: "100%", position: "absolute", left: "0%", 
    textAlign: "left", lineHeight: "2rem", fontSize: "0.75rem", fontWeight: "700" },
}